/**
 * Created by zhangsong on 2019/9/24.
 */
import { Button, Spin, Icon } from 'antd';
import React, { Component } from 'react';
// import PDF from 'react-pdf-js';
import { Document, Page } from 'react-pdf';
// import PDF from '@mikecousins/react-pdf';

import Print from 'print-js';
import { FormattedMessage } from '@/utils/i18n';
export default class Pdf extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: true,
      total: 1,
      currentPage: 1,
    };
  }

  onDocumentComplete = numPages => {
    this.setState({
      loading: false,
      total: numPages || 1,
      currentPage: 1,
    });
  };

  handlePrev = () => {
    const { currentPage } = this.state;
    if (currentPage > 1) {
      this.setState({
        currentPage: currentPage - 1,
      });
    }
  };

  handleNext = () => {
    const { currentPage, total } = this.state;
    if (currentPage < total) {
      this.setState({
        currentPage: currentPage + 1,
      });
    }
  };

  printPdf = () => {
    const { url } = this.props;
    Print(url);
  };

  render() {
    const { url, className, printing } = this.props;
    const { loading, currentPage, total } = this.state;
    console.log('看看这个参数', url);
    return (
      <Spin spinning={false} className={className}>
        {/* <PDF
          file={url}
          page={currentPage}
          onDocumentComplete={numPages => this.onDocumentComplete(numPages)}
        /> */}
        <Document
          key={url}
          file={url}
          onLoadSuccess={numPages => this.onDocumentComplete(numPages)}
        >
          <Page pageNumber={currentPage} />
        </Document>
        <div style={{ marginTop: '10px', marginBottom: '10px' }}>
          <Button.Group size="small">
            <Button icon="left" onClick={this.handlePrev} disabled={loading || currentPage === 1}>
              <FormattedMessage id="button.prevPage" />
            </Button>
            <Button onClick={this.handleNext} disabled={loading || currentPage === total}>
              <FormattedMessage id="button.nextPage" />
              <Icon type="right" />
            </Button>
          </Button.Group>
          {printing ? (
            <Button onClick={() => this.printPdf()} size="small" style={{ marginLeft: '10px' }}>
              <FormattedMessage id="button.printing" />
            </Button>
          ) : null}
        </div>
      </Spin>
    );
  }
}
